<template>
  <div class="match3-game">
    <div class="game-board">
      <div 
        v-for="(row, rowIndex) in board" 
        :key="rowIndex" 
        class="row"
      >
        <div 
          v-for="(cell, colIndex) in row" 
          :key="colIndex" 
          class="cell" 
          :class="{ selected: cell.selected }"
          @click="selectCell(rowIndex, colIndex)"
        >
          <div 
            v-if="cell.value !== null" 
            class="block" 
            :style="{ backgroundColor: cell.value }"
          ></div>
        </div>
      </div>
    </div>
    <div class="score-board">
      <p>Score: {{ score }}</p>
    </div>
    <div class="controls">
      <button @click="resetGame">Restart</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Match3Game',
  data() {
    return {
      boardSize: 9,
      board: [],
      selectedCells: [],
      score: 0,
      colors: ['#FF5733', '#33FF57', '#3357FF', '#F3FF33', '#FF33F6', '#33FFF6']
    };
  },
  mounted() {
    this.initializeBoard();
  },
  methods: {
    initializeBoard() {
      const totalCells = this.boardSize * this.boardSize;
      const colorCount = Math.floor(totalCells / (this.colors.length * 3)) * 3;
      const colorDistribution = this.colors.map(() => colorCount);

      let allBlocks = [];
      this.colors.forEach(color => {
        allBlocks = allBlocks.concat(Array(colorDistribution[this.colors.indexOf(color)]).fill(color));
      });

      // Shuffle the blocks to ensure randomness
      for (let i = allBlocks.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [allBlocks[i], allBlocks[j]] = [allBlocks[j], allBlocks[i]];
      }

      this.board = Array.from({ length: this.boardSize }, (_, rowIndex) => 
        Array.from({ length: this.boardSize }, (_, colIndex) => ({ value: allBlocks[rowIndex * this.boardSize + colIndex], selected: false }))
      );

      // Ensure no initial matches
      while (this.checkForMatches()) {
        this.shuffleBoard();
      }
    },
    getRandomColor() {
      return this.colors[Math.floor(Math.random() * this.colors.length)];
    },
    selectCell(rowIndex, colIndex) {
      const cell = this.board[rowIndex][colIndex];
      if (cell.value !== null) {
        if (cell.selected) {
          cell.selected = false;
          this.selectedCells = this.selectedCells.filter(c => c.row !== rowIndex || c.col !== colIndex);
        } else {
          cell.selected = true;
          this.selectedCells.push({ row: rowIndex, col: colIndex });
        }
        this.checkSelection();
      }
    },
    checkSelection() {
      if (this.selectedCells.length === 3) {
        const [cell1, cell2, cell3] = this.selectedCells;
        const value1 = this.board[cell1.row][cell1.col].value;
        const value2 = this.board[cell2.row][cell2.col].value;
        const value3 = this.board[cell3.row][cell3.col].value;

        if (value1 === value2 && value2 === value3) {
          this.board[cell1.row][cell1.col].value = null;
          this.board[cell2.row][cell2.col].value = null;
          this.board[cell3.row][cell3.col].value = null;
          this.score += 30;
          this.selectedCells.forEach(cell => {
            this.board[cell.row][cell.col].selected = false;
          });
          this.selectedCells = [];
          this.checkForMatches();
        } else {
          this.selectedCells.forEach(cell => {
            this.board[cell.row][cell.col].selected = false;
          });
          this.selectedCells = [];
        }
      }
    },
    checkForMatches() {
      let matchesFound = false;

      // Check horizontal matches
      for (let row = 0; row < this.boardSize; row++) {
        for (let col = 0; col <= this.boardSize - 3; col++) {
          const value = this.board[row][col].value;
          if (value !== null && value === this.board[row][col + 1].value && value === this.board[row][col + 2].value) {
            matchesFound = true;
            this.board[row][col].value = null;
            this.board[row][col + 1].value = null;
            this.board[row][col + 2].value = null;
            this.score += 30;
          }
        }
      }

      // Check vertical matches
      for (let col = 0; col < this.boardSize; col++) {
        for (let row = 0; row <= this.boardSize - 3; row++) {
          const value = this.board[row][col].value;
          if (value !== null && value === this.board[row + 1][col].value && value === this.board[row + 2][col].value) {
            matchesFound = true;
            this.board[row][col].value = null;
            this.board[row + 1][col].value = null;
            this.board[row + 2][col].value = null;
            this.score += 30;
          }
        }
      }

      if (matchesFound) {
        this.checkForMatches(); // Recursively check for new matches
      }

      return matchesFound;
    },
    shuffleBoard() {
      const allBlocks = this.board.flat().map(cell => cell.value);
      for (let i = allBlocks.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [allBlocks[i], allBlocks[j]] = [allBlocks[j], allBlocks[i]];
      }

      this.board = Array.from({ length: this.boardSize }, (_, rowIndex) => 
        Array.from({ length: this.boardSize }, (_, colIndex) => ({ value: allBlocks[rowIndex * this.boardSize + colIndex], selected: false }))
      );
    },
    resetGame() {
      this.score = 0;
      this.initializeBoard();
    }
  }
};
</script>

<style scoped>
.match3-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  padding: 20px;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(9, 50px);
  grid-template-rows: repeat(9, 50px);
  gap: 5px;
  background-image: url('https://i.imgur.com/5QZ1JjB.png'); /* Background image for the board */
  background-size: cover;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 5px;
}

.row {
  display: contents;
}

.cell {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.cell.selected {
  border: 2px solid #42b983;
}

.block {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

.score-board {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 400px;
  font-size: 1.5em;
  color: #333;
  margin-bottom: 20px;
}

.controls {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #42b983;
  color: white;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #3498db;
}
</style>